<template>
	<view class="content">
		<cu-custom bgColor="head2" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title1}}</block>
		</cu-custom>
		<view class="Search" style="flex-direction: column;height: 	177rpx;">
				<input  type="text" value="" :focus="isFocus1" v-model="query01"  @confirm="getDetails(1)" :placeholder="$t('pages.PleaseScanTheOrderNumber')" />
				<input  type="text" value="" :focus="isFocus2" v-model="query02"  @confirm="getDetails(1)" :placeholder="$t('pages.PleaseScanTheProduct')" style="margin-top: 16rpx;"/>
		</view>
		<scroll-view scroll-y="true" style="flex: 1;overflow: auto;" @scrolltolower='scroll'>
			<view class="body_t" v-for="(item,index) in data" :key=	'index'>
				<view class="title" style="border-bottom: 1px dashed #DBDBDB;">
					<view class="posi_left"></view>
					{{$t('pages.WarehouseNumber')}}：{{item.query01 || ''}}
					<view class="posi_right" :style="{background: `url(${Img}) 100% 100%`}">{{item.query02 || ''}}</view>
				</view>
			<!-- 	<view class="item">
					<view>批次号：</view>
					<view style="color: #2D2F2E;">{{item.query03 || ''}}</view>
				</view> -->
				<view class="item">
					<view>{{$t('pages.productCode')}}：</view>
					<view style="color: #2D2F2E;">{{item.query04 || ''}}</view>
				</view>
				<view class="item">
					<view>{{$t('pages.productName')}}：</view>
					<view style="color: #2D2F2E;">{{item.query05 || ''}}</view>
				</view>
				<view class="item">
					<view>{{$t('pages.quantityOfOrder')}}：</view>
					<view style="color: #2D2F2E;">{{item.query11 || ''}}</view>
				</view>
				<view class="item">
					<view>{{$t('pages.QuantityToBeStored')}}：</view>
					<view style="color: #2D2F2E;">{{item.query12 || ''}}</view>
				</view>
				<view class="item">
					<view>{{$t('pages.unit')}}：</view>
					<view style="color: #2D2F2E;">{{item.query08 || ''}}</view>
				</view>
				<view class="inputText">
					<view class="" style="display: flex; width: 100%; align-items: center;justify-content: space-between;">
						<text>{{$t('pages.dateInProduced')}}：</text>
						<dyDatePicker @getData="(e)=>dyDatePickerChange(e,index)"  :childValue="item.query07" style="width: 50%;height: 65rpx; border: 1px solid #3297E2;line-height: 65rpx; color: #3297E2;text-align: right;padding-right: 20rpx;width: 300rpx;margin-top: 0;border-radius: 10rpx;"/>
					</view>
				</view>
				<view class="inputText">
					<view class="" style="display: flex; width: 100%; align-items: center;justify-content: space-between;">
						<text>{{$t('pages.batchNumber')}}：</text>
						<input v-model="item.query03" style=" color: #3297E2;text-align: right;padding-right: 20rpx;width: 300rpx;margin-top: 0;"   placeholder-style="color:#E0E2E4"/>
					</view>
				</view>
				<!-- <view class="inputText">
					<view class="" style="display: flex; width: 100%; align-items: center;justify-content: space-between;">
						<text>{{$t('pages.ThePalletNo')}}：</text>
						<input v-model="item.query09" style=" color: #3297E2;text-align: right;padding-right: 20rpx;width: 300rpx;margin-top: 0;"   placeholder-style="color:#E0E2E4"/>
					</view>
				</view> -->

				<view class="inputText" style="border-bottom: 1px dashed #DBDBDB;">
					<view class="" style="display: flex; width: 100%; align-items: center;justify-content: space-between;">
						<text>{{$t('pages.QuantityOfWarehousingThisTime')}}：</text>
						<input v-model="item.query13" style=" color: #3297E2;text-align: right;padding-right: 20rpx;width: 300rpx;margin-top: 0;"   placeholder-style="color:#E0E2E4"/>
					</view>
				</view>
				<view class="btn" @click="preserve(item)">{{$t('pages.confirm')}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import dyDatePicker from './../component/dyDatePicker'
	export default {
		data() {
			return {
				title:'',
				title1:'',
				Img: require('@/static/ZX/ysh.png'),
				Img1: require('@/static/ZX/wsh.png'),
				userName:'',
				query01:'',
				query02:'',
				data:[],
				pageNo:1,
				pageSize:10,
				isFocus1: true,
				isFocus2: false,
			}
		},
		components:{
			dyDatePicker
		},
		onLoad() {
			this.title = this.$Route.query.title
			this.title1 = this.$Route.query.NameKey
			this.userName = uni.getStorageSync('login_user_info').username || '';
			// this.getDetails();
		},
		methods: {
			dyDatePickerChange(e,index){
				this.data[index].query07 = e
			},
			scroll(){
				this.pageNo++
				this.getDetails()
			},
			preserve(item){
				if(!item.query07) return uni.showToast({title:'请输入生产日期'})
				if(!item.query03) return uni.showToast({title:'请输入批次'})
				// if(!item.query09) return uni.showToast({title:'请输入托盘号'})
				if(!item.query13) return uni.showToast({title:'请输入入库数量'})
				if(Number(item.query13) > Number(item.query12)) return uni.showToast({title:'入库数量不能大于待收货数量'})
				let data = {
					...item,
					username:this.userName,
					listtype:this.title
				}
				let that = this
				uni.showLoading({title: '加载中',mask:true})
				this.$http.post('/jeewms/pdaPapi/postdata',data).then(res => {
					uni.showToast({ title:res.data.message,icon:'none' })
					uni.hideLoading()
					if(res.data.code==200){
						that.getPrint(item.id).then(()=>{
							that.getShippingMark(item.id)
						})
						this.data = []
						this.pageNo = 1
						this.getDetails()
					}
				})
			},
			// 入库标签打印
			getPrint(e){
				console.log(e)
				return new  Promise((resolve)=>{
					this.$http.get('/jeewms/wmImNoticeH/labelPrinting',{params:{id:e}}).then(res => {
						resolve()
					})
				})
			},
			getShippingMark(e){
				this.$http.get('/jeewms/wmImNoticeH/labelPrints',{params:{id:e}}).then(res => {})
			},
			getDetails(e){
				if(!this.query01) return uni.showToast({title:'请扫描单号',icon:'none'})
				if(e == 1){
					this.data = []
					this.isFocus1 =  false
					this.isFocus2 =  true
					this.pageNo = 1
				}
				let data = {
					pageNo:this.pageNo,
					pageSize:this.pageSize,
					username:this.userName,
					listtype:this.title,
					query01:this.query01,
					query02:this.query02
				}
				this.$http.get('/jeewms/pdaGapi/getlist',{params:data}).then(res => {
					res.data.result.records.map(item=>{
						item.query07 = '2022-01-01'
						item.query03 = this.$dateFormat(new Date(), 'YYYYMMDD')
					})
					this.data = this.data.concat(res.data.result.records)
				})
			},
			bindPickerChange(e,i,key,list){
				let index = e.detail.value;
				this.$nextTick(()=>{
					this.$set(this.data[i], 'query10', list[index].query01)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		width: 100%;
		height: 100vh;
		background-color: #F3F4F6;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.Search{
			width: 100%;
			height: 101rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			input{
				padding-left: 36rpx;
				width: 92.66%;
				height: 70rpx;
				background: #F3F4F6;
				border-radius: 30px;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.body_t{
			width: 	92.53%;
			min-height: 500rpx;
			margin: 27rpx auto;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 33rpx;
			.title {
				width: 100%;
				height: 70rpx;
				position: relative;
				line-height: 60rpx;
				color: #3297E2;
				font-size: 34rpx;

				.posi_left {
					height: 30rpx;
					width: 6rpx;
					background: #3297E2;
					position: absolute;
					left: -32rpx;
					top: 15rpx;
				}

				.posi_right {
					height: 56rpx;
					width: 104rpx;
					background: #3297E2;
					position: absolute;
					right: -24px;
					top: 10rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #fff;
					text-align: center;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
			}
			.item{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #666666;
				justify-content: space-between;
			}
			.inputText{
				// margin-top: 10rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				// border-bottom: 1px dashed #DBDBDB;
				padding-bottom: 20rpx;
				text{
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}
				view{
					width: 35%;
				}
				input{
					margin-top: 25rpx;
					height: 68rpx;
					border: 1px solid #3297E2;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					border-radius: 5px;
				}
			}
			.btn{
				margin: 16rpx auto 16rpx;
				width: 90%;
				height: 76rpx;
				background: #3396E2;
				border-radius: 10px;
				font-size: 36rpx;
				line-height: 76rpx;
				font-family: PingFang SC;
				font-weight: 400;
				text-align: center;
				color: #FFFEFE;
			}
		}
	}
	.search-select{
		display: flex;
		width: 92.66%;
		height: 35px;
		border-radius: 30px;
		background-color: #F3F4F6;
		.search-picker{
			display: flex;
			align-items: center;
		}
	}
	.select-input{
		width: 300rpx !important;
		display:flex;
		align-items: center;
		height: 34px;
		border: 1px solid #3297E2;
		border-radius: 5px;
		padding-right: 20rpx;
		input{
			border: none !important;
		}
	}
</style>
